<template>
    <div class="contents">
        <div class="title t-c">
            {{ date }}
        </div>
        <img class="banner" src="@/assets/banner.png" alt="">
        <div class="list cff">
            <div class="p-r d-f" @click="menu('/zp')">
                <div class="left">
                    <div class="f20">exhibitors</div>
                    <div class="f40">参展企业数</div>
                </div>
                <div class="f30"><label class="f54 f-w">{{list.czqys}}</label> 个</div>
                <div v-show="czqys" class="add p-a f32">+{{czqys_num}}</div>
            </div>
            <div class="p-r d-f" @click="menu('/gws')">
                <div class="left">
                    <div class="f20">posts</div>
                    <div class="f40">岗位数</div>
                </div>
                <div class="f30"><label class="f54 f-w">{{list.gws}}</label> 个</div>
                <div v-show="gws" class="add p-a f32">+{{gws_num}}</div>
            </div>
            <div class="p-r d-f" @click="menu('/zprs')">
                <div class="left">
                    <div class="f20">recruits</div>
                    <div class="f40">招聘人数</div>
                </div>
                <div class="f30"><label class="f54 f-w">{{list.zprs}}</label> 人</div>
                <div v-show="zprs" class="add p-a f32">+{{zprs_num}}</div>
            </div>
            <div class="p-r d-f" @click="menu('/cz')">
                <div class="left">
                    <div class="f20">enterprises signed in</div>
                    <div class="f40">签到企业数</div>
                </div>
                <div class="f30"><label class="f54 f-w">{{list.qdqys}}</label> 个</div>
                <div v-show="qdqys" class="add p-a f32">+{{qdqys_num}}</div>
            </div>
            <div class="p-r d-f" @click="menu('/xss')">
                <div class="left">
                    <div class="f20">students attending</div>
                    <div class="f40">参会学生数</div>
                </div>
                <div class="f30"><label class="f54 f-w">{{list.chxss}}</label> 人</div>
                <div v-show="chxss" class="add p-a f32">+{{chxss_num}}</div>
            </div>
            <div class="p-r d-f" @click="menu('/tdjl')">
                <div class="left">
                    <div class="f20">resumes sent</div>
                    <div class="f40">投递简历数</div>
                </div>
                <div class="f30"><label class="f54 f-w">{{list.tdjls}}</label> 份</div>
                <div v-show="tdjls" class="add p-a f32">+{{tdjls_num}}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

import Navi from "./Navi.vue";
import { ref, onMounted } from "vue";
import { index } from "@/axios/index";
import { useRouter } from "vue-router";
const router = useRouter();
const tdjls = ref(false);
const tdjls_num = ref(0);
const czqys = ref(false);
const czqys_num = ref(0);
const qdqys = ref(false);
const qdqys_num = ref(0);
const gws = ref(false);
const gws_num = ref(0);
const zprs = ref(false);
const zprs_num = ref(0);
const chxss = ref(false);
const chxss_num = ref(0);
const list = ref([]);
const numbers = ref(0);
const menu = async (val) => {
    router.push({
      path: val,
    });
};
const indess = async (val) => {
    let { data } = await index({
    });
    if (data.code == 200) {
        numbers.value++
        if(numbers.value <= 1){
            list.value=data.data;
        }
        if(data.data.tdjls != list.value.tdjls){
            tdjls_num.value = data.data.tdjls-list.value.tdjls
            tdjls.value =  true 
        }
        if(data.data.czqys != list.value.czqys){
            czqys_num.value = data.data.czqys-list.value.czqys
            czqys.value =  true 
        }
        if(data.data.qdqys != list.value.qdqys){
            qdqys_num.value = data.data.qdqys-list.value.qdqys
            qdqys.value =  true 
        }
        if(data.data.gws != list.value.gws){
            gws_num.value = data.data.gws-list.value.gws
            gws.value =  true 
        }
        if(data.data.zprs != list.value.zprs){
            zprs_num.value = data.data.zprs-list.value.zprs
            zprs.value =  true 
        }
        if(data.data.chxss != list.value.chxss){
            chxss_num.value = data.data.chxss-list.value.chxss
            chxss.value =  true 
        }
        console.log(Number(data.data.chxss)-Number(list.value.chxss));
        setTimeout(() => {
            tdjls.value =  false 
            qdqys.value =  false 
            gws.value =  false 
            zprs.value =  false 
            chxss.value =  false 
            czqys.value =  false 
        }, 3000);
        list.value=data.data;
    } else {

    }
};
const date = ref('')
const newdate  = async (val) => {
    const now = new Date();
    const year = now.getFullYear(); // 获取年份（四位数）
    const month = now.getMonth() + 1; // 获取月份（0-11，需要加1）
    const day = now.getDate(); // 获取日期（1-31）
    const hours = now.getHours(); // 获取小时（0-23）
    const minutes = now.getMinutes(); // 获取分钟（0-59）
    const seconds = now.getSeconds(); // 获取秒数（0-59）
    const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const weekDay = weekDays[now.getDay()];
    date.value = `${year}年${getzero(month)}月${getzero(day)}日 ${weekDay} ${getzero(hours)}:${getzero(minutes)}:${getzero(seconds)}`
    console.log(date.value);
}; 
const getzero = (num) => { 
    if (parseInt(num) < 10) {
        num = '0' + num;
    }
    return num;
}
onMounted(() => {
    indess()
    setInterval(() => {
    newdate();
    }, 1000);
    setInterval(() => {
        indess()
    }, 10000);

});
</script>

<style lang="scss" scoped>
.contents{
    background-color: #fff;
    height: 100vh;
    .title{
        font-size: 22px;
        padding-top: 30px;
    }
    .banner{
        width: 593px;
        height:auto;
        display: block;
        margin: 10px auto;
    }
    .list{
        margin: 20px 14px;
        .p-r{
            width: 100%;
            height: 165px;
                background: url('@/assets/index6.png') no-repeat;
            background-size: 100% 100%;
            margin-bottom: 20px;
            &:nth-child(2){
                background: url('@/assets/index4.png') no-repeat;
            background-size: 100% 100%;
            }
            &:nth-child(3){
                background: url('@/assets/index5.png') no-repeat;
            background-size: 100% 100%;
            }
            &:nth-child(4){
                background: url('@/assets/index3.png') no-repeat;
            background-size: 100% 100%;
            }
            &:nth-child(5){
                background: url('@/assets/index2.png') no-repeat;
            background-size: 100% 100%;
            }
            &:nth-child(6){
            background: url('@/assets/index1.png') no-repeat;
            background-size: 100% 100%;
            }
            .f30{
                position: absolute;
                right:230px;
                top: 50%;
                transform:  translate(0%,-50%);
            }
        }
        .add{
            left: 440px;
            top: 15px;
        }
        .left{
            padding-left: 33px;
        }
    }
}/* 定义淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0; /* 初始状态：完全透明 */
  }
  to {
    opacity: 1; /* 结束状态：完全不透明 */
  }
}

/* 应用淡入动画到元素 */
.add {
  animation: fadeIn 1s; /* 动画名称，持续时间 */
}

</style>